<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超维空间背景</title>
    <style>
        :root {
            --neon-blue: #00f7ff;
            --neon-purple: #bc13fe;
            --matrix-green: #0f0;
        }

        body {
            margin: 0;
            overflow: hidden;
            background: radial-gradient(circle at center, 
                #000000 0%, 
                #0a0a2e 40%,
                #17003a 100%);
            height: 100vh;
        }

        .quantum-field {
            position: relative;
            width: 100%;
            height: 100%;
            filter: blur(0.5px);
        }

        /* 量子星云 */
        .nebula {
            position: absolute;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 50% 50%,
                rgba(188, 19, 254, 0.1) 0%,
                rgba(0, 247, 255, 0.05) 50%,
                transparent 100%);
            animation: nebulaPulse 12s infinite;
        }

        /* 动态光流粒子 */
        .photon-stream {
            position: absolute;
            width: 2px;
            height: 100px;
            background: linear-gradient(to bottom,
                transparent 0%,
                var(--neon-blue) 30%,
                var(--neon-purple) 70%,
                transparent 100%);
            opacity: 0.7;
            filter: blur(1px);
        }

        /* 能量脉冲 */
        .energy-pulse {
            position: absolute;
            border: 2px solid var(--neon-blue);
            border-radius: 50%;
            box-shadow: 0 0 30px var(--neon-purple);
            animation: pulseExpand 5s infinite;
        }

        @keyframes nebulaPulse {
            0% { opacity: 0.3; transform: scale(1); }
            50% { opacity: 0.7; transform: scale(1.2); }
            100% { opacity: 0.3; transform: scale(1); }
        }

        @keyframes pulseExpand {
            0% { transform: scale(0); opacity: 1; }
            100% { transform: scale(5); opacity: 0; }
        }

        /* 光流路径动画 */
        @keyframes photonFlow {
            0% { transform: translateY(-100%) rotate(45deg); }
            100% { transform: translateY(100vh) rotate(45deg); }
        }

        /* 增强版星空 */
        .star {
            position: absolute;
            background: #fff;
            border-radius: 50%;
            animation: colorTwinkle 3s infinite;
            filter: drop-shadow(0 0 5px currentColor);
        }

        @keyframes colorTwinkle {
            0% { opacity: 0.2; }
            50% { 
                opacity: 1;
                background: hsl(${Math.random()*360}, 100%, 80%);
                transform: scale(1.5);
            }
            100% { opacity: 0.2; }
        }

        /* 全息网格 */
        /*.hologrid {
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(0, 247, 255, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 247, 255, 0.05) 1px, transparent 1px);
            background-size: 30px 30px;
        }*/
    </style>
</head>
<body>
    <div class="quantum-field">
        <div class="nebula"></div>
        <div class="hologrid"></div>
        <div id="photons"></div>
        <div id="stars"></div>
        <div id="pulses"></div>
    </div>

    <script>
        // 生成彩色星空
        function createStars() {
            const container = document.getElementById('stars');
            for (let i = 0; i < 300; i++) {
                const star = document.createElement('div');
                star.className = 'star';
                star.style.width = Math.random()*4 + 'px';
                star.style.height = star.style.width;
                star.style.left = Math.random()*100 + '%';
                star.style.top = Math.random()*100 + '%';
                star.style.animationDelay = Math.random()*5 + 's';
                star.style.color = `hsl(${Math.random()*360}, 100%, 80%)`;
                container.appendChild(star);
            }
        }

        // 生成光流粒子
        function createPhotons() {
            const container = document.getElementById('photons');
            for (let i = 0; i < 15; i++) {
                const photon = document.createElement('div');
                photon.className = 'photon-stream';
                photon.style.left = Math.random()*100 + '%';
                photon.style.animation = `photonFlow ${8 + Math.random()*10}s linear infinite`;
                photon.style.setProperty('--hue', Math.random()*360);
                container.appendChild(photon);
            }
        }

        // 生成能量脉冲
        function createPulses() {
            setInterval(() => {
                const pulse = document.createElement('div');
                pulse.className = 'energy-pulse';
                pulse.style.left = Math.random()*100 + '%';
                pulse.style.top = Math.random()*100 + '%';
                document.getElementById('pulses').appendChild(pulse);
                
                setTimeout(() => pulse.remove(), 5000);
            }, 2000);
        }

        // 初始化
        window.onload = () => {
            createStars();
            createPhotons();
            createPulses();
        };

        // 鼠标互动效果
        document.addEventListener('mousemove', (e) => {
            const particles = 5;
            for(let i=0; i<particles; i++){
                const particle = document.createElement('div');
                particle.style.position = 'absolute';
                particle.style.left = e.pageX + 'px';
                particle.style.top = e.pageY + 'px';
                particle.style.width = '3px';
                particle.style.height = '3px';
                particle.style.background = `hsl(${Math.random()*360}, 100%, 50%)`;
                particle.style.borderRadius = '50%';
                particle.style.animation = `particleFly ${0.5+Math.random()*1}s linear`;
                document.body.appendChild(particle);
                
                setTimeout(() => particle.remove(), 1000);
            }
        });
    </script>
</body>
</html>